@extends('layouts.admin_master')
@section('content')
    <div class="card">
        <div class="card-header">
            <ul class="nav">
                <li class="nav-item">
                    <a href="{{route('goods.goods.index')}}" class="nav-link">商品列表</a>
                </li>
                <li class="nav-item">
                    <a href="{{route('goods.goods.create')}}" class="nav-link active">添加商品</a>
                </li>
            </ul>
        </div>
        <form action="{{route('goods.goods.update',$good)}}" method="post">
            @csrf @method('PUT')
            <div class="card-body">
                <div class="form-group row">
                    <label class="col-md-2 label-control text-center">商品名称</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" name="name" value="{{$good['name']}}">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-2 label-control text-center">商品价格</label>
                    <div class="col-md-10">
                        <input type="text" class="form-control" name="price" value="{{$good['price']}}">
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-2 label-control text-center">所属分类</label>
                    <div class="col-md-3">
                        <select name="category_id[]" class="form-control" id="topCategory">
                            <option value="">选择顶级分类</option>
                            @foreach($categorys as $category)
                                <option value="{{$category['id']}}" {{in_array($category['id'],$good['category_id'])?'selected':''}}>{{$category['category_name']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select name="category_id[]" class="form-control" id="secondCategory">
                            <option value="">选择二级分类</option>
                            @foreach($secondCategorys as $v)
                                <option value="{{$v['id']}}" {{$good['category_id'][1] == $v['id'] ? 'selected' : ''}}>{{$v['category_name']}}</option>
                            @endforeach
                        </select>
                    </div>
                    <div class="col-md-3">
                        <select name="category_id[]" class="form-control" id="thirdCategory">
                            <option value="">选择三级分类</option>
                            @foreach($thirdCategorys as $v)
                                <option
                                    value="{{$v['id']}}" {{$good['category_id'][2] == $v['id'] ? 'selected' : ''}}>{{$v['category_name']}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-2 label-control text-center">可用属性</label>
                    <div class="col-md-10" id="attrs">
                        @foreach($attrs as $attr)
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="attrs[]" id="attr{{$attr['id']}}" value="{{$attr['id']}}" {{in_array($attr['id'],$attrIds->toArray())?'checked':''}}>
                            <label class="form-check-label" for="attr{{$attr['id']}}">{{$attr['attr_name']}}</label>
                        </div>
                        @endforeach
                    </div>
                </div>
                <style>
                    #box img {
                        width: 200px;
                        float: left;
                        margin-right: 10px;
                        border: solid 1px #999;
                        padding: 10px;
                        height: 200px;
                    }
                </style>
                <div class="form-group row">
                    <label class="col-md-2 label-control text-center">商品图片</label>
                    <div class="col-md-10">
                        <button type="button" class="layui-btn" id="test1">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <div id="box">
                            @foreach($good['pics'] as $v)
                                <img src="{{$v}}" alt="">
                                <input type="hidden" name="pics[]" value="{{$v}}">
                            @endforeach
                        </div>
                    </div>
                </div>
                <div class="form-group row">
                    <label class="col-md-2 label-control text-center">商品详情</label>
                    <div class="col-md-10">
                        {{--<div id="editormd">--}}
                            {{--<textarea name="content">{{$good['content']}}</textarea>--}}
                        {{--</div>--}}

                        <script id="container" name="content" type="text/plain">{!! $good['content'] !!}</script>

                        <!-- 配置文件 -->
                        <script type="text/javascript" src="{{asset('org/ueditor/ueditor.config.js')}}"></script>
                        <!-- 编辑器源码文件 -->
                        <script type="text/javascript" src="{{asset('org/ueditor/ueditor.all.js')}}"></script>
                        <!-- 实例化编辑器 -->
                        <script type="text/javascript">
                            var ue = UE.getEditor('container',{
                                initialFrameHeight:300,   // 设置高度
                            });
                        </script>

                    </div>
                </div>
                <div class="form-group row" id="attrss">
                    <label class="col-md-2 label-control text-center">是否推荐</label>
                    <div class="col-md-10" id="attrsss">
                        <div class="form-check form-check-inline">
                            <input class="form-check-input" type="checkbox" name="is_commend" id="is_commend" value="1" {{$good['is_commend']?'checked':''}}>
                            <label class="form-check-label" for="is_commend">是</label>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer text-muted">
                <button type="submit" class="btn btn-bg-gradient-x-purple-blue">保存数据</button>
            </div>

        </form>
    </div>
@endsection
@push('js')
    <script>
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
    </script>
    <script>
        // 顶级分类的选择事件
        $('#topCategory').change(function () {
            // 当选择顶级分类的时候将二级分类的数据清空
            $('#secondCategory').html('<option value="">选择二级分类</option>');
            // 当选择顶级分类的时候将三级分类的数据清空
            $('#thirdCategory').html('<option value="">选择三级分类</option>');
            // 获取顶级分类的id，用异步的方法请求子分类
            var id = $(this).val();
            // 发送异步请求
            $.ajax({
                url: '/category/getSon/' + id,
                method: 'get',
                dataType: 'json',
                success: function (res) {
                    // 定义一个变量来循环接收html数据
                    var html = '';
                    $.each(res, function (k, v) {
                        html += '<option value="' + v.id + '">' + v.category_name + '</option>';
                    });
                    $('#secondCategory').append(html);
                }
            })
        })

        // 二级分类的选择事件
        $('#secondCategory').change(function () {
            // 当选择二级分类的时候将三级分类的数据清空
            $('#thirdCategory').html('<option value="">选择三级分类</option>');
            // 获取二级分类的id，用异步的方法请求子分类
            var id = $(this).val();
            // 发送异步请求
            $.ajax({
                url: '/category/getSon/' + id,
                method: 'get',
                dataType: 'json',
                success: function (res) {
                    // 定义一个变量来循环接收html数据
                    var html = '';
                    $.each(res, function (k, v) {
                        html += '<option value="' + v.id + '">' + v.category_name + '</option>';
                    });
                    $('#thirdCategory').append(html);
                }
            })
        })

        // 三级分类的选择事件
        $('#thirdCategory').change(function () {
            // 获取三级分类的id，用异步的方法请求子分类
            var id = $(this).val();
            // 发送异步请求
            $.ajax({
                url: '/category/getAttrs/' + id,
                method: 'get',
                dataType: 'json',
                success: function (res) {
                    // 定义一个变量来循环接收html数据
                    var html = '';
                    $.each(res, function (k, v) {
                        html += '<div class="form-check form-check-inline"><input class="form-check-input" type="checkbox" name="attrs[]" id="attr' + v.id + '" value="' + v.id + '"> <label class="form-check-label" for="attr' + v.id + '">' + v.attr_name + '</label> </div>';
                    });
                    $('#attrs').html(html);
                }
            })
        })

    </script>

    {{--图片上传--}}
    <script>
        layui.use('upload', function(){
            var upload = layui.upload;
            //执行实例
            var uploadInst = upload.render({
                elem: '#test1' //绑定元素
                ,url: '{{route('util.upload')}}' //上传接口
                ,multiple:true
                ,done: function(res){
                    console.log(res);
                    $('<img src="' + res.data.src + '" /><input type="hidden" name="pics[]" value="' + res.data.src + '">').appendTo('#box');
                }

            });
        });
    </script>
    {{--编辑器--}}
    @include('layouts.editor_md')
@endpush
